/**
 * ResourceDialog module
 */

// var BaseCategory = require("../model/BaseCategory");
// var BaseResources = require("../model/BaseResources");
// var BaseImportResource = require("../model/BaseImportResource");
import editorWidget from "../../actions/Editor/widgets";
import editorActions from "../../actions/Editor/editor";
import editorDialog from "../../actions/Editor/dialog";
import editorPage from '../../actions/Editor/pages'
import apiResources from '../../actions/Editor/resources'
import {bindActionCreators} from 'redux';
import {connect} from 'dva';
import React, {Component} from 'react';
class ResourceDialog extends Component {
    constructor(props) {
        super(props)
        this.state = {
            resources: [],
            categories: [],
            selectedCateId: "",
            selectedResourceId: null
        }
    }

    getInitialProps() {
        return {
            root: {}
        }
    }

    componentDidMount() {
        this.elements = {};
        this.elements.dialog = $(this.refs.dialog);
        this.elements.dialog.css({
            "marginTop": "-" + this.elements.dialog.height() * 0.5 + "px",
            "marginLeft": "-" + this.elements.dialog.width() * 0.5 + "px"
        });
        this.props.requestResource('');
    }

    handleOnCateChange(e) {
        var node = $(e.target), cate_id = node.val();
        this.props.requestResource(cate_id);
        this.setState({selectedResourceId: null});
    }

    handleOnResourceSelect(id, e) {
        this.setState({selectedResourceId: id});
    }

    importOtherResource() {
        const {closeDialog,importOtherResource}=this.props;
        closeDialog();
        importOtherResource(this.state.selectedResourceId);
        // this.importResource.save(, function () {
        //     root.updatePages();
        // });
    }

    transData(templates) {
        let data = {
            categories: [],
            resources: []
        }
        templates.forEach((val)=> {
            data.resources.push({
                resource_picture_id: val.picture.resource_picture_id,
                media_src: val.picture.media_src,
                resource_tag_title:val.resource_tag_title
            });
            data.categories.push({
                cate_id: val.picture.resource_picture_id,
                media_src: val.picture.media_src,
                resource_tag_title:val.resource_tag_title
            });
        })
        return data;

    }

    render() {
        const {editor_cate_list,closeDialog,resources}=this.props;
        var selectedResourceId = this.state.selectedResourceId;

        var rStyle = {
            top: "50%",
            left: "50%",
            width: "800px",
            height: "auto",
            display: "block",
            borderRadius: '5px',
            overflow: 'hidden'
        };

        return (
            <dialog id="resourceDialog" ref="dialog" style={rStyle} className="btg-modal widget-form"
                    onselectstart="return false">
                <div className="btg-modal-content">
                    <form noValidate name="form.name" className="form-horizontal import-resource-content">
                        <div className="widget-form-title">
                            <label>
                                <span>{$._("Import other resource content")}</span>
                            </label>
                        </div>
                        <div style={{marginLeft:"60px",textAlign:"left"}}>
                            <label>{$._('Select Category')}</label>
                            <select onChange={(e)=>this.handleOnCateChange(e)} className="select-cate" style={{width:"200px"}}
                                    defaultValue={this.state.selectedCateId}>
                                <option value="">{$._("All")}</option>
                                {
                                    editor_cate_list.map(function (category) {
                                        return (
                                            <option key={category.cate_id} value={category.cate_id}>
                                                {category.cate_name}
                                            </option>
                                        )
                                    })
                                }
                            </select>
                        </div>
                        <div className="form-group">
                            <ul className="resource-list">
                                {
                                    resources.map(function (resource) {
                                        return (
                                            <li data-id={resource.resource_picture_id}
                                                onClick={this.handleOnResourceSelect.bind(this, resource.resource_picture_id)}
                                                key={resource.resource_picture_id}
                                                className={"resource-item " + (selectedResourceId == resource.resource_picture_id ? "selected" : "")}>
                                                <div
                                                    style={{width:"60px",height:"60px",overflow:"hidden",backgroundPosition:"center"}}>
                                                    <img src={resource.media_src} width="60" height='60'/>
                                                </div>
                                                <span classs="resource-item-title">{resource.resource_tag_title}</span>
                                            </li>
                                        )
                                    }.bind(this))
                                }
                            </ul>
                        </div>
                        <div className="form-group buttons">
                            <button onClick={()=>this.importOtherResource()} type="submit"
                                    disabled={!this.state.selectedResourceId}>
                                <span>{$._("Import")}</span>
                            </button>
                        </div>
                    </form>
                </div>
                <a href="#" onClick={closeDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
}
const mapStateToProps = ({recognize,resources}) => {
    return {
        editor_cate_list:recognize.editor_cate_list,
        resources:resources.list||[]
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({...apiResources, ...editorDialog, ...editorPage, ...editorActions}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(ResourceDialog);
